<template>
  <div class="container-1200 selloffer-detail-content">
      <div class="wy-main-title wy-m-t-40">
          <p>
                <span><nuxt-link to="./../info/index">首页</nuxt-link></span>
                <span>  /  绿色食品供应链  /  供应信息  /   </span>
                <span>{{detail.subject}}</span>
          </p>
      </div>
      <!-- 分割线 -->
      <div class="tender-detail">
          <div class="tender-city">
              <!-- 商品展示 -->
              <div class="sell-detail-goods">
                  <div class="goods-pic">
                       <img :src="FileUploadUrl2+detail.imgPaths">
                  </div>
                  <div class="sell-goods-detail">
                      <h2>{{detail.subject}}</h2>
                      <div class="goods-detail-content">
                            <p>供应商：{{concatDetail.company || '暂无'}}</p>
                            <p>货品类型：{{detail.name}}</p>
                            <p>货品名称：{{detail.typeValue}}</p>
                            <p>产地：<span>{{detail.producePlace}}</span></p>       
                            <p>供应周期：<span>{{detail.cycleStart}}月</span>-<span>{{detail.cycleEnd}}月</span></p>
                            <p>数量：<span>{{detail.number}}</span><span>{{detail.numberUnitValue}}</span></p>
                            <p>最低起订量：<span>{{detail.minNumber}}</span><span>{{detail.minNumberUnitValue}}</span></p>
                            <p v-if="loggedIn">价格：<span>{{detail.priceDisplay}}</span><span>{{detail.priceUnitValue}}</span></p>
                            <p v-if="!loggedIn">价格：<span >{{detail.priceDisplay}}</span><span>{{detail.priceUnitValue}}</span><a href="/login" style="margin-left: 10px">登录查看</a></p>
                      </div>
                  </div>
              </div>
              <div class="tend-list-sell" style="margin-top:35px;">
                <div class="ant-list ant-list-vertical ant-list-lg ant-list-split">
                  <div class="ant-spin-nested-loading">
                    <div class="ant-spin-container">
                      <div class="ant-list-item">
                        <div class="ant-list-item-content ant-list-item-content-single">
                          <div class="Infor-title">联系人</div>
                          <div class="Infor-cont">{{concatDetail.legalPerson || '暂无'}}</div></div>
                      </div>
                      <div class="ant-list-item">
                        <div class="ant-list-item-content ant-list-item-content-single">
                          <div class="Infor-title">联系电话</div>
                          <div class="Infor-cont">{{concatDetail.mobile || '暂无'}}</div></div>
                      </div>
                      <div class="ant-list-item">
                        <div class="ant-list-item-content ant-list-item-content-single">
                          <div class="Infor-title">电子邮箱</div>
                          <div class="Infor-cont">{{concatDetail.email || '暂无'}}</div></div>
                      </div>
                      <div class="ant-list-item">
                        <div class="ant-list-item-content ant-list-item-content-single">
                          <div class="Infor-title">QQ</div>
                          <div class="Infor-cont">{{concatDetail.qqDisplay || '暂无'}}</div></div>
                          
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 产品说明 -->
              <div class="tender-notice">
                    <div class="tnder-main-title">产品说明</div>
                    <div class="notice-information">
                        <div>
                                <p>{{detail.description}}
                                <!-- <nuxt-link to="/">查看全文>></nuxt-link> -->
                                 </p>
                        </div>
                   </div>
              </div>
              <!-- 公司简介 -->
              <div class="tender-company-profile">
                    <div class="tnder-main-title">公司简介
                          <nuxt-link :to="`./../../corp`">进入企业主页</nuxt-link>
                    </div>
                    <div class="company-profile-content">
                        <p>{{concatDetail.companyBriefRemark}}</p>
                    </div>
              </div>
              <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
                        <a-button v-if="loggedIn" type="primary" html-type="submit" @click="elasticShowModal(concatDetail.userId)">立即沟通</a-button>
                         <a-button v-if="!loggedIn" type="primary" html-type="submit"> <a href="/login">立即沟通</a></a-button>
              </a-form-item>
              <!-- 在线留言 -->
              <!-- <div class="online-word">
                  <div class="tnder-main-title">在线留言</div> -->
                  <!-- <a-form :form="form">
                    <a-row>
                        <a-col :span='12'>
                            <a-form-item label="联系人：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                  <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" />
                            </a-form-item>
                        </a-col>
                        <a-col :span='12'>
                            <a-form-item label="联系方式：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                  <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span='12'>
                            <a-form-item label="公司名称：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                  <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" />
                            </a-form-item>
                        </a-col>
                        <a-col :span='12'>
                            <a-form-item label="QQ：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                  <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" />
                           </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :span='24'>
                          <a-col :span='24'>
                                <a-form-item label="留言主题：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                                <a-input v-decorator="['note',{rules: [{ required: true, message: '请填写你的主题留言' }]}]" placeholder='请填写你的主题留言' />
                              </a-form-item>
                          </a-col>
                    </a-row>
                    <a-row>
                          <a-col>
                                <a-form-item label="备注：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                                      <a-textarea v-decorator="['note',{rules: [{ required: true, message: '请填写备注' }]}]"  placeholder='请填写备注'/>
                                </a-form-item>
                          </a-col>
                    </a-row>
                    
                  </a-form> -->
                  
              <!-- </div> -->
          </div>
          <div class="tender-concat">
                <div class="tnder-main-title">联系方式</div>
                <div class="concat-content">
                      <h3>{{concatDetail.company}}</h3>
                      <div>
                            <span>用户星级</span>
                            <a-rate :defaultValue="2.5" allowHalf />
                      </div>
                </div>
                <div class="concat-renzhen">
                      <a-button>{{concatDetail.attestationStatusValue}}</a-button>
                </div>
                <!-- 分割线 -->
                <div class="concat-line"></div>
                <!-- <p>公司地址：{{concatDetail.companyAddress || '暂无'}}</p> -->
                <p>详细地址：{{concatDetail.detailAddress || '暂无'}}</p>
                <p>成立时间：{{concatDetail.companyCreateTime&&concatDetail.companyCreateTime.split(' ')[0]}}</p>
                <p>联系人：{{concatDetail.legalPerson || '暂无'}}</p>
                <div class="otehr-product-information">
                        <div class="tnder-main-title">公司其产品信息</div>
                        <div class="other-product-lsit">
                              <ul>
                                 <li v-for="(item,index) in details" :key="index">
                                   <nuxt-link :to="`./${item.greenFoodSupplyId}`">
                                    <div class="other-pic">
                                      <img :src="FileUploadUrl2+item.imgPaths">
                                    </div>
                                   <div class="other-val">{{item.name}}</div>
                                  </nuxt-link>
                                  </li>
  
                              </ul>
                        </div>
                </div>
          </div>
      </div>
      <!--弹框-->
       <Elastic  :type="type"  ref='elastic'></Elastic>
  </div>
</template>

<script>
// import { chainData } from './../../../utils/chainData'
import { environment } from '@/server/environment'
import Elastic from './../../../components/dialog/Elastic'
import AuthMixin from '~/mixins/auth'
export default{
   mixins: [ AuthMixin ],
   components: {
      Elastic,
    },
  data(){
    return{
      detail: {},
      type:'',
      data:{},
      form: this.$form.createForm(this),
      FileUploadUrl2:environment.FileUploadUrl2,
      concatDetail: {
            // userd:'1'
      },//联系方式
      details:{},
      

    }
  },
    async asyncData ({ app, $axios, params, query, error }) {
        const returnData = {}
        const id = params.id
        try {
            const { data } = await $axios.$get('/api/info/greenFoodSupply/open/getGreenFoodSupplyDeTail/'+id, { params: {} })
            returnData.detail = data;
        } catch (err) {
            return error({ statusCode: err.code, msg: err.msg })
        }
        return returnData
    },
  created(){
        this.id = this.$route.params.id
        this.sellOfferListById(this.id)
      //   this.concatUserName(this.detail.username);
        this.greenOtherById(this.detail.greenFoodSupplyId);
      //   this.sellOfferListById()

  },
  watch:{
        '$route':function (){
              this.id = this.$route.params.id
              this.sellOfferListById(this.id)
              this.concatUserName(this.detail.username);
              this.greenOtherById(this.detail.greenFoodSupplyId);
        }

  },
  methods: {
        //获取绿色食品供应详情
      async sellOfferListById (id) {
            const res = await this.$store.dispatch('info/sellOfferListById',id)
             console.log(res,22222)
            if (res.status) {
              this.detail = res.data;
              this.concatUserName(this.detail.username);
              this.greenOtherById(this.detail.greenFoodSupplyId);
            } 
      },
      // 联系方式
      async concatUserName (id) {
            console.log(id,88888888)
          
          const res = await this.$store.dispatch('info/concatUserName',id)
          console.log(res,6666)
          // if (res.status) {
            this.concatDetail = res.data;
            // console.log(this.concatDetail,111);
          // } 
      },
      //绿色食品供应其他
      
         async greenOtherById (id) {
          const res = await this.$store.dispatch('info/greenOtherById',id)
          if(res.status){
                this.details = res.data
                

          }
          
      },
      //弹框
       elasticShowModal(id){
      //   this.userId = id
        this.$refs.elastic.showModal(id);
    },

  }
//   created:function(){
//     const id = this.$route.params.id
//     chainData.supply.find((item,index)=>{
//       if (item.id == id) {
//         this.detail = item;
//       }
//     })
//   },

}
</script>
<style lang="scss">
@import "./../../../assets/css/chain/Detail.scss";
@other-pic{
      width: 360px;
      height: 180px;
}
</style>